<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv=X-UA-Compatible content="IE=edge">
		<meta name=viewport content="width=device-width,initial-scale=1">
		
		<title>智龙迷城攻略</title>
		<!-- import CSS -->
		<link rel="stylesheet" href="./style/element-ui@2.15.13.css" />
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" /> -->

		<!-- 引入仿照 Vuetify 制作的 margin padding 类库 -->
		<link rel="stylesheet" href="./style/MarginPadding@0.2.0.css" />

		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
	
			#app {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<el-container id="app" style="width: 100%; height: 100%;">
			<keep-Alive :include="cpuRouterViewKeepAlive">
				<router-view></router-view>
			</keep-Alive>
		</el-container>
	</body>
	<!-- import Vue before Element -->
	<script src="./script/vue@2.7.16.js"></script>
	<!-- 开发环境版本 -->
	<!-- <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script> -->
	<!-- 生产环境版本 -->
	<!-- <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script> -->	

	<!-- import Vue Router -->
	<script src="./script/vue-router@3.6.5.js"></script>
	<!-- <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script> -->

	<!-- import JavaScript -->
	<script src="./script/element-ui@2.15.13.js"></script>
	<!-- <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script> -->

	<!-- 解决 chrome 报错 [Violation]Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive -->
	<script src="./script/default-passive-events@2.0.0.js"></script>

	<script src="./script/axios@1.4.0.js"></script>
	<script>		
		// 超时时间是 20 秒
		axios.defaults.timeout = 20000;
		// 允许跨域
		axios.defaults.crossDomain = true;
		axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*";

		// axios.defaults.withCredentials = true;
		// axios.defaults.crossDomain = true;
		//Access-Control-Allow-Origin 指向前端 ip:port
		// axios.defaults.headers.common['Access-Control-Allow-Origin'] = process.env.VUE_APP_Access_Control_Allow_Origin;	
	</script>

	<script src="./script/linq@3.2.0.js"></script>
	<script src="./script/jsonp@0.0.1.js"></script>

	<!-- import my component-->
	<!-- <script src="./component/ho-js-version.js"></script> -->

	<!-- import view -->
	<!-- 
	<script src="./view/root.js"></script>
	<script src="./view/TODO.js"></script> -->

	<script>
		function initVueApp ()
		{
			// window.ELEMENT 等于 import Element from 'element-ui' 其中的对象 Element
			// Vue.use(window.ELEMENT, { size: 'medium', zIndex: 2000 }); // 尺寸 string default (不设置) / medium / small / mini

			//#region 创建路由实例并配置路由规则
			const routerArr = [
				{ path: '/', component: view_root, IsIgnore: true }, // 根路由
				{ path: '/view/TODO', component: view_TODO, DisplayName: "TODO", meta: { keepAlive: true } },
				{ path: '/view/Screen', component: view_TODO, DisplayName: "屏幕" },

				{ path: '/view/1point2Billion', component: view_1point2Billion, DisplayName: "12亿" },
			];

			const router = new VueRouter({ routes: routerArr });
			//#endregion

			const EventBus = new Vue();

			var vueApp = new Vue({
				el: "#app",
				router, // 注入路由
				data: function () {
					return {

					};
				},
				computed: {
					cpuRouterViewKeepAlive() {
						// 根据 routerArr 的数据, 组合 keep-alive include 所需要的集合
						return routerArr.filter(i => i.meta?.keepAlive).map(i => 
						{
							// 从 path 截取出 view 的控件名称
							let index = i.path.lastIndexOf('/');
							if(index < 0) 
								index = 0;
							else
								index = index + 1; // 去掉开始的斜杠						
							return i.path.substring(index);
						});
					}
				},
				methods: {
					
				},
			});
		}
		
		const __loadScriptWithoutCache_DateNow__ = Date.now();

		// 在代码中实现禁用缓存的效果
		function loadScriptWithoutCache(args) {
			return new Promise((resolve, reject) => {
				const src = `${args}?date=${__loadScriptWithoutCache_DateNow__}`;
				const script = document.createElement('script');
				script.src = src;

				script.addEventListener('load', () => {
					console.log(`script loaded: ${src}`);
					resolve();
				});

				script.addEventListener('error', () => {
					console.error(`Failed to load script: ${src}`);
					reject(new Error(`Failed to load script: ${src}`));
				});

				document.head.appendChild(script);
			});
		}

		// 加载必要的视图组件
		const scriptPromiseArray = [
			// import component			
			loadScriptWithoutCache('./component/ho-js-version.js'),

			// import view
			loadScriptWithoutCache('./view/root.js'),
			loadScriptWithoutCache('./view/TODO.js'),

			loadScriptWithoutCache('./view/1point2Billion.js'), // 12亿攻略
		];

		Promise.all(scriptPromiseArray).then(initVueApp); // 等待所有脚本加载成功后, 执行 Vue 的初始化
	</script>
	<style>
		.small {
			margin-left: 15px;
			margin-right: 15px;
			font-size: 42px;
		}

		.p_red {
			color: red;
		}
	</style>
</html>
